<!--
 * @Description: 通讯录
 * @Author: liu (1427179517@qq.com)
 * @Date: 2022-01-16 15:00:23
 * @LastEditors: liu (1427179517@qq.com)
 * @LastEditTime: 2022-06-25 14:48:46
 * @FilePath: \jiekuan-app\src\subPages\other\contacts.vue
-->
<template>
  <div class="page">
    <div class="page-header"></div>
    <div class="page-content">
      <view class="contacts" v-if="list && list.length">
        <div class="title">通讯录</div>
        <div class="u-flex item" v-for="(item, index) in list" :key="index" @click.stop="handleClick(item)">
          <div class="name">{{ item.displayName }}</div>
          <div class="phone u-m-l-50">{{ item.phoneNumbers[0].value }}</div>
        </div>
      </view>
    </div>
    <div class="page-footer"></div>
    <u-no-network></u-no-network>
    <view-loading :loading="loadingSkeleton"></view-loading>
  </div>
</template>

<script>
export default {
  name: '', // 页面名称
  components: {}, // 挂载组件
  props: {}, // 组件传值
  data() {
    return {
      loadingSkeleton: true, // 页面等待
      current: 0, // 当前点击的第几项
      list: [], // 通讯录列表
    }
  },
  computed: {}, // 计算机属性 类似与data概念
  watch: {}, // 监控data中数据变化
  created() {}, // 生命周期-创建完成(可以访问当前this实例)
  mounted() {}, // 生命周期-挂载完成(可以访问DOM元素)
  methods: {
    // 点击联系人
    handleClick(options) {
      const params = {
        current: this.current,
        name: options.displayName,
        phone: options.phoneNumbers[0].value,
      }
      uni.setStorageSync('linkman', params)
      uni.navigateBack({
        delta: 1,
      })
    },
    // 获取当前手机通讯录
    getContacts: function () {
      var that = this
      // 获取通讯录对象
      plus.contacts.getAddressBook(plus.contacts.ADDRESSBOOK_PHONE, function (addressbook) {
        that.$toast('获取通讯录对象成功')
        // 查找联系人
        addressbook.find(
          ['displayName', 'phoneNumbers'],
          function (contacts) {
            that.list = contacts
          },
          function () {
            that.$toast('获取联系人失败')
          },
          { multiple: true }
        )
      })
    },
    // 添加联系人
    apiAddressBook() {
      const list = []
      this.list.forEach((item) => {
        if (item.displayName && item.phoneNumbers[0].value) {
          const name = item.displayName
          const phone = item.phoneNumbers[0].value
          list.push({ name: phone })
        }
      })
    },
  }, // 挂载一些方法
  onLoad(options = {}) {
    this.current = options.current
    console.log('onLoad', options, Date.now())
  }, // 生命周期回调—监听页面加载
  onShow() {
    this.getContacts()
    this.loadingSkeleton = false
  }, // 生命周期回调—监听页面显示
  onReady() {}, // 生命周期回调—监听页面初次渲染完成
  onHide() {}, // 生命周期回调—监听页面隐藏
  onUnload() {}, // 生命周期回调—监听页面卸载
}
</script>

<style lang="scss" scoped>
.contacts {
  padding: 30rpx;
  .title {
    text-align: center;
    font-size: 50rpx;
  }
  .item {
    padding: 30rpx 0;
    font-size: 30rpx;
    border-top: 1rpx solid #f5f5f5;
  }
  .name {
    min-width: 100rpx;
  }
}
</style>
